@import "../../theme/default.less";


.setTopLine(@c: @border-color-base) {
    content: " ";
    position: absolute;
    display: block;
    z-index: 15;
    left: 0;
    top: 0;
    right: 0;
    bottom: auto;
    height: 1Px;
    width: 100%;
    background-color: @c;
    transform-origin: 50% 0;
    transform: scaleY(0.5);
    [data-dpr="2"] & {
        transform: scaleY(0.5);
    }
    [data-dpr="3"] & {
        transform: scaleY(0.33);
    }
}

.setBottomLine(@c:@border-color-base) {
    content: " ";
    position: absolute;
    display: block;
    z-index: 15;
    top: auto;
    left: 0;
    bottom: 0;
    right: auto;
    height: 1Px;
    width: 100%;
    background-color: @c;
    transform-origin: 50% 100%;
    transform: scaleY(0.5);
    [data-dpr="2"] & {
        transform: scaleY(0.5);
    }
    [data-dpr="3"] & {
        transform: scaleY(0.33);
    }
}

.setLeftLine(@c:@border-color-base) {
    content: " ";
    position: absolute;
    display: block;
    z-index: 15;
    left: 0;
    top: 0;
    bottom: 0;
    right: auto;
    width: 1Px;
    height: 100%;
    background-color: @c;
    transform-origin: 0 50%;
    transform: scaleX(0.5);
    [data-dpr="2"] & {
        transform: scaleX(0.5);
    }
    [data-dpr="3"] & {
        transform: scaleX(0.33);
    }
}

.setRightLine(@c:@border-color-base) {
    content: " ";
    position: absolute;
    display: block;
    z-index: 15;
    right: 0;
    top: 0;
    left: auto;
    bottom: 0;
    width: 1Px;
    height: 100%;
    background-color: @c;
    transform-origin: 100% 50%;
    transform: scaleX(0.5);
    [data-dpr="2"] & {
        transform: scaleX(0.5);
    }
    [data-dpr="3"] & {
        transform: scaleX(0.33);
    }
}

// .setTopLine(@c:#C7C7C7){
//     content: '';
//     position: absolute;
//     left: 0;
//     top: 0;
//     bottom: auto;
//     right: auto;
//     height: 1px;
//     width: 100%;
//     background-color: @c;
//     display: block;
//     z-index: 15;
//     transform-origin: 50% 0;
// }
// .setBottomLine(@c:#C7C7C7){
//     content: '';
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     right: auto;
//     top: auto;
//     height: 1px;
//     width: 100%;
//     background-color: @c;
//     display: block;
//     z-index: 15;
//     transform-origin: 50% 100%;
// }
// 通过放大一倍,再缩小
.setOnepxBorder(@b:@border-color-base, @r:2px) {
    &:after {
        // content:'';
        // position: absolute;
        // width: 200%;
        // height: 200%;
        // top: 0;
        // left: 0;
        // border: 1Px solid @b;
        // transform-origin: 0 0;
        // box-sizing: border-box;
        // border-radius:@r;
        content: " ";
        position: absolute;
        pointer-events: none;
        box-sizing: border-box;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        border: 0px solid @b;
        border-radius: @r;
        transform: scale(0.5);
        [data-dpr="2"] & {
            transform: scale(0.5);
        }
        [data-dpr="3"] & {
            transform: scale(0.33);
        }
    }
}



// .pixel-ratio() {
//     [data-dpr="2"] & {
//         transform: scale(0.5);
//     }
//     [data-dpr="3"] & {
//         transform: scale(0.33);
//     }
// }